<template>
  <div>
    <a-spin :spinning="isLoading" />
    <div v-if="!isLoading" class="order-content">
      <a-card v-if="record.invoice" class="mt-20" :bordered="false">
        <a-descriptions title="订单信息">
          <a-descriptions-item label="订单编号">{{ record.order_no }}</a-descriptions-item>
          <a-descriptions-item label="订单金额">{{ record.order_price }}</a-descriptions-item>
          <a-descriptions-item label="付款状态">
            <a-tag :color="record.pay_status == PayStatusEnum.SUCCESS.value ? 'green' : ''">{{ PayStatusEnum[record.pay_status].name }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="订单状态">
            <a-tag :color="renderOrderStatusColor(record.order_status)"
            >{{ OrderStatusEnum[record.order_status].name }}</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card v-if="record.invoice" class="mt-20" :bordered="false">
        <a-descriptions title="发票信息">
          
          <a-descriptions-item label="类型">{{ InvoiceTypeEnum[record.invoice.status].name }}</a-descriptions-item>
          <a-descriptions-item label="公司全称">{{record.invoice.name}}</a-descriptions-item>
          <a-descriptions-item label="纳税识别号">{{record.invoice.identify_number}}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{record.invoice.phone}}</a-descriptions-item>
          <a-descriptions-item label="电子邮箱">{{record.invoice.email}}</a-descriptions-item>
          <a-descriptions-item label="地区" v-if="record.invoice.status==0">
            {{record.invoice.region.province}}
            {{record.invoice.region.city}}
            {{record.invoice.region.region}}
          </a-descriptions-item>
          <a-descriptions-item label="详细地址" v-if="record.invoice.status==0">{{record.invoice.detail}}</a-descriptions-item>
          <a-descriptions-item label="银行账号" v-if="record.invoice.status==0">{{record.invoice.bank_account}}</a-descriptions-item>
          <a-descriptions-item label="开户行信息" v-if="record.invoice.status==0">{{record.invoice.bank_message}}</a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
  </div>
</template>

<script>
// import { inArray } from '@/utils/util'
import * as Api from '@/api/order'
import {
  InvoiceTypeEnum,
  OrderStatusEnum,
  PayStatusEnum,
} from '@/common/enum/order'


export default {
  data() {
    return {
      InvoiceTypeEnum,
      OrderStatusEnum,
      PayStatusEnum,
      // 正在加载
      isLoading: true,
      // 订单ID
      orderId: null,
      // 订单详情
      record: {},
    }
  },
  created () {
    // 记录订单ID
    this.orderId = this.$route.query.orderId
    // 刷新页面
    this.handleRefresh()
  },
  methods: {
    // 渲染订单状态标签颜色
    renderOrderStatusColor (orderStatus) {
      const { OrderStatusEnum } = this
      const ColorEnum = {
        [OrderStatusEnum.NORMAL.value]: '',
        [OrderStatusEnum.CANCELLED.value]: 'red',
        [OrderStatusEnum.APPLY_CANCEL.value]: 'red',
        [OrderStatusEnum.COMPLETED.value]: 'green'
      }
      return ColorEnum[orderStatus]
    },
    
    // 刷新页面
    handleRefresh () {
      // 获取当前记录
      this.getDetail()
    },

    // 获取当前记录
    getDetail () {
      const { orderId } = this
      this.isLoading = true
      Api.detail({ orderId })
        .then(result => {
          // 当前记录
          this.record = result.data.detail
        })
        .finally(() => {
          this.isLoading = false
        })
    },
  }
}
</script>

<style>

</style>